<html><!DOCTYPE html>
<html>
<head>
  <style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold; }
  </style>
  <script src="../../../../../../g.alicdn.com/kissy/k/1.4.7/seed.js" tppabs="http://g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>
  <button id="getp">Get Paragraph Height</button>
  <button id="getd">Get Document Height</button>
  <button id="getw">Get Window Height</button>

  <div>&nbsp;</div>
  <p>
    Sample paragraph to test height
  </p>
<script>
    KISSY.use("node",function(S,Node){
        var $=Node.all;
        function showHeight(ele, h) {
          $("div").text("The height for the " + ele + 
                        " is " + h + "px.");
        }
        $("#getp").on("click",function () { 
          showHeight("paragraph", $("p").height()); 
        });
        $("#getd").on("click",function () {
          showHeight("document", $(document).height()); 
        });
        $("#getw").on("click",function () { 
          showHeight("window", $(window).height()); 
        });
    });
</script>

</body>
</html>